<template>
    <!--巡检管理 / 区域分类 -->
    <div class="layout-padding">
      <basic-container class="layout-padding-auto layout-padding-view">
        <avue-crud
          v-model='form'
          ref='crud'
          :page='page'
          :data='tableData'
          :permission="permissionList"
          :table-loading='tableLoading'
          :option='tableOption'
          :before-open='handleOpenBefore'
          @on-load='getList'
          @search-change='searchChange'
          @refresh-change='refreshChange'
          @size-change='sizeChange'
          @current-change='currentChange'
          @row-update='handleUpdate'
          @row-save='handleSave'
          @row-del='rowDel'
          @selection-change='selectionChange'
        >
          <template #menu-left>
            <el-button
             
              class='filter-item'
              plain
              type='primary'
              icon='el-icon-delete'
              @click='plDelete'
            >
              批量删除
            </el-button>
            <el-button
              
              class="filter-item"
              plain
              type="primary"
              icon="el-icon-upload"
              @click="$refs.excelUpload.show()">导入
            </el-button>
            <el-button
              
              class="filter-item"
              plain
              type="primary"
              icon="el-icon-download"
              @click="exportExcel">导出
            </el-button>
          </template>
        </avue-crud>
      </basic-container>
      <!--excel 模板导入 -->
      <excel-upload
        ref="excelUpload"
        title="区域分类信息导入"
        url="/om/ominspection/import"
        temp-name="区域分类信息.xlsx"
        temp-url="/admin/sys-file/local/inspectionclassification.xlsx"
        @refreshDataList="handleRefreshChange">
      </excel-upload>
    </div>
  </template>
  
  <script>
  import { fetchList, addObj, delObj, putObj, delAllObj } from '/@/api/check/omicheckclassify'
  import { tableOption } from '/@/const/crud/check/omicheckclassify'
  import { mapGetters } from 'vuex'
  import ExcelUpload from '/@/components/ExcelUpload/index.vue'
  import {ElLoading} from "element-plus";
  
  export default {
    name: 'omicheckclassify',
    data() {
      let _this = this
      return {
        parentId: 0,
        infoType: null,
        form: {},
        onlineDevlist: [],
        areaNoid: '',
        infoData1: [],
        searchForm: {},
        tableData: [],
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10 // 每页显示多少条
        },
        tableLoading: false,
        tableOption: tableOption,
        selectList: [],
        loading:null
      }
    },
    components: {
      ExcelUpload,
    },
    computed: {
    //   ...mapGetters(['permissions']),
      permissionList() {
        return {
        //   getBtn: this.validData(this.permissions.om_inspection_area_get, false),
        //   addBtn: this.validData(this.permissions.om_inspection_area_add, false),
        //   editBtn: this.validData(this.permissions.om_inspection_area_edit, false),
        //   delBtn: this.validData(this.permissions.om_inspection_area_del, false)
        }
      }
    },
    methods: {
      openLoading() {
        this.loading = ElLoading.service({
          lock: true,
          text: 'Loading',
          background: 'rgba(0, 0, 0, 0.7)',
        })
      },
      closeLoading(){
        this.loading.close()
      },
      // 添加
      handleAdd(row, size, type) {
        this.parentId = row.id
        this.$refs.crud.rowAdd()
      },
      // 全选按钮
      selectionChange(list) {
        this.selectList = list
      },
      // 获取表格数据
      getList(page, params) {
        this.tableLoading = true
        fetchList(
          Object.assign(
            {
              current: page.currentPage,
              size: page.pageSize
            },
            params,
            this.searchForm
          )
        )
          .then((response) => {
            this.tableData = response.data.records
            this.page.total = response.data.total
            this.tableLoading = false
          })
          .catch(() => {
            this.tableLoading = false
          })
      },
      // 删除
      rowDel: function(row, index) {
        this.$confirm('是否确认删除' + row.name, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(function() {
            return delObj(row.id)
          })
          .then((data) => {
            this.$message.success('删除成功')
            this.getList(this.page)
          })
          .catch((cancelorerror) => {
          })
      },
      // 修改更新数据
      handleUpdate: function(row, index, done, loading) {
        row.relList = this.infoData1
        putObj(row)
          .then((data) => {
            this.$message.success('修改成功')
            done()
            this.getList(this.page)
          })
          .catch(() => {
            loading()
          })
      },
      // 新增数据
      handleSave: function(row, done, loading) {
        row.relList = this.infoData1
        row.parentId = this.parentId
        addObj(row)
          .then((data) => {
            this.$message.success('添加成功')
            done()
            this.parentId = 0
            this.getList(this.page)
          })
          .catch(() => {
            loading()
          })
      },
      // 分页大小
      sizeChange(pageSize) {
        this.page.pageSize = pageSize
      },
      // 改变页数
      currentChange(current) {
        this.page.currentPage = current
      },
      // 点击搜索
      searchChange(form, done) {
        this.searchForm = form
        this.page.currentPage = 1
        this.getList(this.page, form)
        done()
      },
      // 刷新表格
      refreshChange() {
        this.getList(this.page)
      },
      // 打开前回调
      handleOpenBefore(show, type) {
        this.infoData1 = this.form.relList ? JSON.parse(JSON.stringify(this.form.relList)) : []
        show()
      },
      //批量删除
      plDelete() {
        if (this.selectList.length > 0) {
          this.$confirm('是否确认删除以选择的数据', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              let ids = []
              this.selectList.forEach((data) => {
                ids.push(data.id)
              })
              this.openLoading()
              return delAllObj(ids).then((res)=>{
               this.closeLoading()
                this.$message.success('删除成功')
                this.getList(this.page)
              }).catch(()=>{
                this.closeLoading()
                this.$message.error('删除失败')
              })
            })
            .then((data) => {
  
            })
            .catch((cancelorerror) => {
            })
        }
      },
      // 导出
      exportExcel(){
        this.downBlobFile('/om/ominspection/export', this.searchForm, '区域分类信息.xlsx')
      },
      // 更新表格数据
      handleRefreshChange() {
        this.getList(this.page)
      },
    }
  }
  </script>
  